<template>
  <div>
    <a-modal :visible="visible" @before-open="open" @ok.stop="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="700px" :mask-closable="false">
      <template #title> 选择入库货品 </template>
      <div style="display: flex">
        <a-input-group>
          <a-select :style="{ width: '120px' }" placeholder="请选择" v-model="searchValue.code">
            <a-option v-for="item of options" :key="item.value" :label="item.label" :value="item.value" />
          </a-select>
          <a-input :style="{ width: '180px' }" placeholder="请输入" v-model="searchValue.value" allow-clear>
            <template #suffix>
              <a-popover position="br" trigger="click" v-model:popup-visible="showPopover">
                <icon-more-vertical style="cursor: pointer; margin-left: 5px" />
                <template #content>
                  <a-textarea placeholder="请输入，一行一个" v-model="searchValue.mulValue" :style="{ width: '200px', height: '200px' }" />
                  <div class="footer" style="overflow: hidden">
                    <div class="fl"> <a-button class="gray-outline" size="mini" @click="searchValue.mulValue = ''">清空</a-button> </div>
                    <div class="fr">
                      <a-button size="mini" class="gray-outline" @click="showPopover = false">取消</a-button>
                      <a-button type="outline" size="mini" style="margin-left: 5px" @click="addValue">搜索</a-button>
                    </div>
                  </div>
                </template>
              </a-popover>
            </template>
          </a-input>
        </a-input-group>
        <a-cascader :style="{ width: '160px', margin: '0 10px' }" @change="cascaderChange" v-model="searchValue.categoryId" allow-clear :max-tag-count="1" check-strictly :multiple="false" :options="categoryOptions" :field-names="{ value: 'id', label: 'name' }" placeholder="请选择类目" />
        <a-button type="primary" size="medium" @click="search">搜索</a-button>
      </div>

      <div style="margin-top: 10px">
        <a-table size="mini" class="table-two-line" ref="table" :loading="loading" row-key="id" @selection-change="selectRow" :row-selection="rowSelection" :data="tableList" :pagination="false" :scroll="{ x: '100%', y: '400px' }">
          <template #columns>
            <a-table-column title="序号" width="40">
              <template #cell="{ record, rowIndex }">
                <span>{{ rowIndex + 1 }}</span>
              </template>
            </a-table-column>
            <a-table-column title="店铺" width="120">
              <template #cell="{ record, rowIndex }">
                <span v-if="!shopInfo.share">{{ record.shopName }}</span>
                <span v-else>{{ shopInfo.shopName }}</span>
              </template>
            </a-table-column>
            <a-table-column title="图片" width="60">
              <template #cell="{ record, rowIndex }">
                <span v-if="!shopInfo.share">
                  <ImgPopover :src="record.imageList && record.imageList[0] ? record.imageList[0].link : ''">
                    <template #con>
                      <a-image :preview="false" width="40" height="40" fit="contain" :src="record.imageList && record.imageList[0] ? record.imageList[0].link : ''" />
                    </template>
                  </ImgPopover>
                  <!-- <a-image :src="record.imageList && record.imageList[0] ? record.imageList[0].link : ''" /> -->
                </span>
                <span v-else>
                  <ImgPopover :src="record.productPicList && record.productPicList[0] ? record.productPicList[0].url : ''">
                    <template #con>
                      <a-image :preview="false" width="40" height="40" fit="contain" :src="record.productPicList && record.productPicList[0] ? record.productPicList[0].url : ''" />
                    </template>
                  </ImgPopover>
                  <!-- <a-image width="40px" v-if="record.productPicList && record.productPicList[0]" :src="record.productPicList[0].url" /> -->
                </span>
              </template>
            </a-table-column>
            <a-table-column title="产品名称/SKU" width="140">
              <template #cell="{ record, rowIndex }">
                <a-popover>
                  <div v-if="!shopInfo.share">
                    <div class="text-limit-two">{{ $extract(record, 'product.skuName') }}</div>
                    <div class="text-limit-two">{{ $extract(record, 'product.sku') }}</div>
                  </div>
                  <div v-else>
                    <div class="text-limit-two">{{ record.skuName }}</div>
                    <div class="text-limit-two">{{ record.sku }}</div>
                  </div>
                  <template #content>
                    <div v-if="!shopInfo.share">
                      <div>{{ $extract(record, 'product.skuName') }}</div>
                      <div>{{ $extract(record, 'product.sku') }}</div>
                    </div>
                    <div v-else>
                      <div>{{ record.skuName }}</div>
                      <div>{{ record.sku }}</div>
                    </div>
                  </template>
                </a-popover>
              </template>
            </a-table-column>
            <a-table-column title="MSKU/FNSKU" width="140">
              <template #cell="{ record, rowIndex }">
                <div>{{ record.msku }}</div>
                <div>{{ record.fnSku }}</div>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { onlineProductList } from '@/api/warehouse'
  import FilterKeyword from '@/components/Form/filterKeyword.vue'
  import { pageSkuRelated, getCategoryList } from '@/api/product'
  import { Message } from '@arco-design/web-vue'
  export default defineComponent({
    props: ['shopInfo'],
    components: { FilterKeyword },
    setup(props: any, { emit }) {
      let visible = ref(false)
      const table = ref()
      const data: any = reactive({
        searchValue: {},
        options: [],
        categoryOptions: [],
        tableList: [],
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
          onlyCurrent: false,
        },
        selectList: [],
        loading: false,
        showPopover: false,
      })

      const open = () => {
        console.log(props.shopInfo, '222222')

        data.tableList = []
        getCategory()
        if (!props.shopInfo.share) {
          getOnlineProductList('1')
          data.options = [
            { label: 'SKU', value: 'skuList' },
            { label: 'SPU', value: 'spuList' },
            { label: 'MSKU', value: 'mskuList' },
            { label: '产品名称', value: 'skuNameList' },
          ]
          data.searchValue.code = 'skuList'
        } else {
          getMyProductList('1')
          data.options = [
            { label: 'SKU', value: 'skuList' },
            { label: 'SPU', value: 'spuList' },
            { label: '产品名称', value: 'skuNameList' },
          ]
          data.searchValue.code = 'skuList'
        }
      }
      const handleOk = () => {
        let arr: any = []
        data.selectList.forEach((e: any) => {
          let obj = data.tableList.find((el: any) => el.id == e)
          if (obj) arr.push(obj)
        })
        emit('save', arr)
        visible.value = false
        data.selectList.forEach((e: any) => {
          table.value.select(e, false)
        })
      }
      const handleCancel = () => {
        visible.value = false
      }
      const getCategory = async () => {
        const res: any = await getCategoryList()
        data.categoryOptions = res.data
      }
      const cascaderChange = (val: string) => {}
      const selectRow = (val: any) => {
        data.selectList = val
      }
      const getOnlineProductList = async (type: string) => {
        let params: any = {
          pageNum: 1,
          pageSize: 100,
          isChild: true,
          sellerIdList: props.shopInfo.sellerId,
          marketplaceIdList: props.shopInfo.marketplaceId,
          sellerMarketId: props.shopInfo.sellerMarketId,
        }
        params.categoryIdList = data.searchValue.categoryId
        params[data.searchValue.code] = data.searchValue.value
        if (type == '2') {
          delete params.pageNum
          delete params.pageSize
        }
        data.loading = true
        const res = await onlineProductList(params)
        let arr = res?.data?.records || []
        arr.map((e: any) => {
          // console.log(e)
          if (!(e.product && e.product.sku)) {
            e.disabled = true
          }
          return e
        })
        data.tableList = arr
        data.loading = false
      }

      const getMyProductList = async (type: string) => {
        let params: any = {
          pageNum: 1,
          pageSize: 100,
        }
        data.loading = true
        params.categoryIdList = data.searchValue.categoryId ? [data.searchValue.categoryId] : []
        params[data.searchValue.code] = data.searchValue.value ? data.searchValue.value.split(',') : []
        if (type == '2') {
          delete params.pageNum
          delete params.pageSize
        }

        const res = await pageSkuRelated(params)
        data.tableList = res?.data?.records
        data.loading = false
      }

      const search = () => {
        if (!props.shopInfo.share) {
          getOnlineProductList('2')
        } else {
          getMyProductList('2')
        }
      }

      const addValue = () => {
        if (data.searchValue.mulValue) data.searchValue.value = data.searchValue.mulValue.split('\n').join(',')
        data.searchValue.mulValue = ''
        data.showPopover = false
      }
      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        cascaderChange,
        selectRow,
        addValue,
        search,
        table,
      }
    },
  })
</script>

<style lang="less" scoped></style>
